<template>
    <div class="navigation">
            <el-menu  :default-active="onRoutes" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <!-- <el-menu-item index="/">
                    <span slot="title">首页</span>
                </el-menu-item> -->
                <el-menu-item index="studentsHomePage">
                    <span slot="title">个人主页</span>
                </el-menu-item>
                <el-menu-item index="learningSpace">
                    <span slot="title">{{userInfo.role_id==9?'学生学习空间':'学习空间'}}</span>
                </el-menu-item>
                <el-menu-item index="articleMain">
                    <span slot="title">文章</span>
                </el-menu-item>
                <el-menu-item index="studentsResources">
                    <span slot="title">资源</span>
                </el-menu-item>
                <el-menu-item index="studentTask" v-if="userInfo.role_id !== 9">
                    <span slot="title">任务</span>
                </el-menu-item>
                <el-menu-item index="studentAlbum">
                    <span slot="title">相册</span>
                </el-menu-item>
                <el-menu-item index="studentQuestions">
                    <span slot="title">提问答疑</span>
                </el-menu-item>
                <el-menu-item index="studentFollow/follow?routerKeyPath=follow&routerKeyPath=7">
                    <span slot="title">关注</span>
                </el-menu-item>
                <el-menu-item index="studentDynamic" v-if="userInfo.role_id !== 9">
                    <span slot="title">关注动态</span>
                </el-menu-item>
                <el-menu-item index="classDynamic" v-if="userInfo.role_id !== 9">
                    <span slot="title">{{userInfo.role_id==9?'孩子班级':'班级动态'}}</span>
                </el-menu-item>
                <el-menu-item index="schoolDynamic" v-if="userInfo.role_id !== 9">
                    <span slot="title">{{userInfo.role_id==9?'孩子学校':'学校动态'}}</span>
                </el-menu-item>
                <el-submenu index="application" v-if="userInfo.role_id !== 9">
                    <template slot="title">应用</template>
                    <el-menu-item :index="item.menuurl" v-for="(item, index) in applicationP.list" :key="index">
                        <a :href="item.menuurl" target="_blank">{{item.name}} </a>
                        </el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
</template>

<script>
export default {
    props:['userInfo'],
    mounted(){
        if(this.userInfo.id){
            this.$store.dispatch('commonModule/getApplication').then(res =>{
                if(res){
                    this.applicationP =res
                }
            })
        }
    },
    data(){
        return {
            applicationP: {},
            activeIndex: '/students'
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/students/', '');
        }
    },
    methods:{
      handleSelect(key, keyPath) {
          if(keyPath[0] =='application'){
          }else{
              this.$router.replace({
                path: '/students/'+key
            })
          }
      }
    }
}
</script>

<style lang="scss" scoped>
.navigation{    
    width:81%;
    overflow-x: hidden;
    margin:auto;
}
.el-menu.el-menu--horizontal{
    border-bottom:0px
}
.el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>